<template>
    <el-pagination
        :layout="layout"
        :total="Number(total)"
        :current-page="currentPage"
        :page-size="currentSize"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />
</template>

<script lang="ts" setup name="SGPagination">
const { total } = defineProps({
    total: {
        type: [Number, String],
        default: 0
    },
    layout: {
        type: String,
        default: 'total, sizes, prev, pager, next, jumper'
    },
    currentPage: {
        type: Number,
        default: 1
    },
    currentSize: {
        type: Number,
        default: 10
    }
});

const emit = defineEmits(['update:currentPage', 'update:currentSize']);
// 切换分页数量
const handleSizeChange = (size: number) => {
    emit('update:currentSize', size);
};
// 切换当前页
const handleCurrentChange = (page: number) => {
    emit('update:currentPage', page);
};
</script>
